body {
  display: flex;
  flex-direction: column;
}

.app-home {
  flex: 1;
  overflow-y: scroll;

  /* head */
  .head {
    width: 100%;
    height: 200px;

    .swiper-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保持原有尺寸比例 */
    }
  }

  /* main */
  .main {
    padding: 15px;
    padding-bottom: 100px;
    /* 今日排名 */
    .ranking {
      height: 150px;
      justify-content: space-between;

      /* 今日排名 */
      .rank {
        flex: 3;
        height: 150px;
        margin-right: 20px;
        background-color: rgba(21, 146, 204, 0.73);
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        img {
          width: 128px;
          height: 121px;
          opacity: 0.35;
          position: absolute;
          top: 25px;
          left: -16px;
        }
        .day-rank {
          font-size: 20px;
          color: #004e73;
          font-weight: bold;
          position: absolute;
          top: 12px;
          left: 15px;
        }
        .number {
          font-size: 30px;
          color: #fff;
          font-weight: bold;
          position: absolute;
          top: 46px;
          left: 32px;
        }
      }
      /* 今日打卡 */
      .integral {
        flex: 4;
        height: 150px;
        background: rgba(123, 203, 245, 0.73);
        border-radius: 20px;
        position: relative;
        img {
          width: 104px;
          height: 104px;
          position: absolute;
          left: 16px;
          bottom: 16px;
        }
        .time {
          color: rgba(0, 81, 119, 100);
          font-size: 20px;
          font-weight: bold;
          position: absolute;
          top: 12px;
          left: 15px;
        }
        .btn {
          width: 88px;
          height: 34px;
          font-weight: bold;
          background-color: transparent;
          color: rgba(0, 78, 115, 100);
          border-radius: 20px;
          border: 3px solid #004e73;
          position: absolute;
          left: 88px;
          bottom: 28px;
        }
      }
    }

    /* 运动数据 */
    .sport-data {
      height: 110px;
      margin-top: 20px;
      justify-content: space-between;

      /* 运动数据 */
      .sport {
        height: 110px;
        flex: 1;
        margin-right: 20px;
        border-radius: 20px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 20px;
        }
        p {
          color: #fff;
          font-size: 16px;
          position: absolute;
          left: 12px;
          top: 14px;
        }
      }

      /* 累积运动徽章 */
      .badge {
        height: 110px;
        flex: 1;
        background: #9fd9f8;
        border-radius: 20px;
        position: relative;
        img {
          width: 90px;
          height: 90px;
          position: absolute;
          left: 4px;
          top: 15px;
        }
        .badges {
          font-size: 16px;
          color: #005177;
          font-weight: bold;
          position: absolute;
          left: 12px;
          top: 15px;
        }
        .three {
          font-size: 80px;
          color: #004e73;
          font-weight: bold;
          position: absolute;
          left: 88px;
          top: 12px;
        }
        span {
          font-size: 18px;
          margin-top: 57px;
          position: absolute;
          left: 133px;
          top: 23px;
        }
      }
    }

    /* 课程训练 */
    .train {
      height: 110px;
      margin-top: 20px;
      position: relative;
      overflow: hidden;
      border-radius: 20px;

      img {
        width: 100%;
        position: absolute;
        top: -22px;
        border-radius: 20px;
      }
      p {
        color: #fff;
        position: absolute;
        top: 13px;
        left: 15px;
        font-size: 16px;
        z-index: 100;
      }
    }

    /* 户外跑步 */
    .run {
      height: 110px;
      margin-top: 20px;
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      img {
        width: 100%;
        position: absolute;
        top: -42px;
        border-radius: 20px;
      }
      p {
        color: #fff;
        position: absolute;
        top: 13px;
        left: 15px;
        font-size: 16px;
        z-index: 100;
      }
    }
  }
}
